.stage:hover {
-webkit-transform:scale(1.1);
-ms-transform:scale(1.1);
transform:scale(1.1);
}
.stage:active {
-webkit-transform:scale(1.0);
-ms-transform:scale(1.0);
transform:scale(1.0);
}
.ball {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
border-radius: 50%;
position: relative;
-webkit-transform-style: preserve-3d;
background: url('../images/earth-short.png') repeat-x;
background-size: auto 100%;
-webkit-animation: move-map 60s infinite linear;
animation: move-map 60s infinite linear;
}
.ball:before {
content: "";
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: -40px 10px 70px 10px rgba(0,0,0,0.8) inset;
z-index: 2;
}
.ball:after {
content: "";
position: absolute;
border-radius: 50%;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-filter: blur(0);
opacity: 0.3;
}
.ball .shadow {
position: absolute;
width: 100%;
height: 100%;
-webkit-transform: rotateX(90deg) translateZ(-150px);
-ms-transform: rotateX(90deg) translateZ(-150px);
transform: rotateX(90deg) translateZ(-150px);
z-index: -1;
}
.stage {
position: relative;
top: 20px;
z-index: 5;
-webkit-transform:scale(1.0);
-ms-transform:scale(1.0);
transform:scale(1.0);
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
width: 260px;
height: 260px;
display: inline-block;
margin: 0px;
-webkit-perspective: 1200px;
-ms-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;
-webkit-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
-o-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
@-webkit-keyframes move-map {
0% {
background-position: 0 0; }
100% {
background-position: -520px 0; }
}
@keyframes move-map {
0% {
background-position: -520px 0; }
100% {
background-position: 0 0; } }
